/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    InteractionManager
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import StoreReview from './StoreReview';
import SettingPage from './SettingPage';
import userService from '../lib/services/userService';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class HistoryList extends Component{
    constructor(props) {
        super(props);
        this.token = '';
        this.list = this.props.navigation.state.params.dataList;
        alert(JSON.stringify(this.list))
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource:ds.cloneWithRows(this.list),
        };
        
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.token){
                    $this.token = data.token;
                }                
            }).catch(err=> {
                console.log(err)
            });
    }

    renderListItem(rowData,sectionID,rowId){
        //白色 金色 黑色 粉色
        var statusText = rowData.binding_user_id?rowData.ewm_status:'未绑定用户';
        var imgName = '';
        var statusTime = '';
        var creatTime = '';
        if(rowData.ewm_cate==2){
            imgName = 'dogTag';
        }else if(rowData.ewm_cate==1){
            switch(ewm_color){
                case '白色':
                    imgName = 'white';
                    break;
                case '金色':
                    imgName = 'yellow';
                    break;
                case '黑色':
                    imgName = 'black';
                    break;
                case '粉色':
                    imgName = 'pink';
                    break;
            }
        }
        if(rowData.ewm_status_time){
            var statusDate = new Date(rowData.ewm_status_time*1000);
            statusTime = statusDate.getFullYear()+'-'+(statusDate.getMonth()+1)+'-'+statusDate.getDate()+' '+statusDate.getHours()+':'+statusDate.getMinutes();
        }
        if(rowData.create_time){
            var createDate = new Date(rowData.create_time*1000);
            creatTime = createDate.getFullYear()+'-'+(createDate.getMonth()+1)+'-'+createDate.getDate()+' '+createDate.getHours()+':'+createDate.getMinutes();
        }
        if(rowData.binding_user_id){
            return(
                <TouchableOpacity onPress={()=>this.goInfomationDetails(rowData)}>
                    <View style={styles.itemBox}>
                        <View style={styles.imgBox}>
                            <ImageWrapper width={50} height={50} icon={imgName}/>
                        </View>
                        <View style={{flex:1}}>
                            <View style={{alignItems:'flex-end',paddingRight:20}}>
                                <Text style={{fontSize:12}}>{creatTime}</Text>
                            </View>
                            <Text style={{fontSize:18}}>{rowData.ewm_name}</Text>
                            <Text>状态：{statusText}</Text>
                            <Text>状态时间：{statusTime}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            )
        }else{
            return(
                <View style={styles.itemBox}>
                    <View style={styles.imgBox}>
                        <ImageWrapper width={50} height={50} icon={imgName}/>
                    </View>
                    <View style={{flex:1}}>
                        <View style={{alignItems:'flex-end',paddingRight:20}}>
                            <Text style={{fontSize:12}}>2017-07-21 11:33</Text>
                        </View>
                        <Text style={{fontSize:18}}>{rowData.ewm_name}</Text>
                        <Text>状态：{statusText}</Text>
                        <Text>状态时间：</Text>
                    </View>
                </View>
            )
        }
        
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftPress={()=>this.goBack()}
                    leftIcon={'left'} 
                    titleText={'历史设备列表'}/>
                <ListView 
                    style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}
                    dataSource={this.state.dataSource}
                    closeOnRowPress={true}
                    enableEmptySections={true}
                    renderRow={(rowData,sectionID,rowId) => this.renderListItem(rowData,sectionID,rowId)}/>
            </View>
        )

    }

     // 返回按钮
    goBack(){
        this.props.navigation.goBack();
    }
    goInfomationDetails(rowData){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('InformationDetails',{token:$this.token,personId:rowData.binding_user_id});
    }

}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },
        }),
    }, 
    itemBox:{
        borderWidth:1,
        borderColor:'#ccc',
        marginTop:10,
        marginLeft:10,
        marginRight:10,
        borderRadius:5,
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    imgBox:{
        padding:20,
    }

    
});